<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        <!-- 文本框 -->
        昵称: <input type="text">
        <br>
        <!-- 密码框 -->
        密码: <input type="password">
        <br>
        性别:
        <!-- 单选框之间要具备相同name，才能多选一 -->
        <!-- id是为后续JS做准备的 -->
        <!-- checked="checked"代表当前选项为默认选项 -->
        <label for="male">男</label>
        <input type="radio" name="gender" id="male">
        <label for="female">女</label>
        <input type="radio" name="gender" id="female" checked="checked">
        <br>
        <!-- 复选框 -->
        兴趣爱好:
        <label for="food">吃饭</label>
        <input type="checkbox" name="hobby" id="food" checked="checked">
        <label for="sleep">睡觉</label>
        <input type="checkbox" name="hobby" id="sleep">
        <label for="game">打游戏</label>
        <input type="checkbox" name="hobby" id="game">
        <label for="study">学习</label>
        <input type="checkbox" name="hobby" id="study">
        <br>
        <!-- 普通按钮 -->
        <input type="button" value="名言激励" onclick="alert('你真牛')">
        <br>
        <!-- 清空按钮 -->
        <!-- 只有在 form表单 中使用，才能清空用户的输入，恢复到默认值 -->
        <input type="reset" value="清空内容">
        <br>
        <!-- 选择文件 -->
        <input type="file" name="file" id="file">
        <br>
        <input type="submit" value="提交">
    </form>

    <!-- <input type="submit" value="提交"> -->
</body>

</html>